<template>
  <div class="app-container">
<!--    <el-collapse accordion>-->
<!--      <el-collapse-item title="下单面板">-->
        <el-card class="box-card">
          <el-tabs v-model="bankerTab" type="card">
            <template v-for="banker in bankers">
              <el-tab-pane :label="banker.name">
                <div>
                  <el-tabs v-model="playTab" type="border-card" tab-position="left">
                    <template v-for="play in dict.type.play_type">
                      <el-tab-pane :label="play.label">
                        <PlayOrderPanel :type="play.value" :banker-id="banker.id" @addOrder="addOrder"/>
                      </el-tab-pane>
                    </template>
                  </el-tabs>
                </div>
              </el-tab-pane>
            </template>
          </el-tabs>
        </el-card>

<!--      </el-collapse-item>-->
<!--      <el-collapse-item title="订单面板">-->
        <el-card class="box-card">
          <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
              <el-button
                :type="batchType==='edit'?'success':'info'"
                plain
                icon="el-icon-edit"
                size="mini"
                @click="batchEditHandler"
              >批量设置下家
              </el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button
                :type="batchType==='order'?'success':'info'"
                plain
                icon="el-icon-edit"
                size="mini"
                @click="batchOrderHandler"
              >批量下单
              </el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button
                :type="batchType==='del'?'danger':'info'"
                plain
                icon="el-icon-delete"
                size="mini"
                @click="batchDeleteHandle"
              >删除
              </el-button>
            </el-col>
          </el-row>
          <el-table
            ref="orderTable"
            :data="orderList" stripe highlight-current-row
            @current-change="handleCurrentChange"
            @selection-change="handleSelectionChange"
            style="width: 100%"
          >
            <el-table-column
              type="selection"
              :selectable="selectable"
              width="55"
            />
            <el-table-column
              prop="bankerName"
              label="网站"
              width="180"
              align="center"
            >
              <template slot-scope="scope">
                <template v-for="item in bankers">
                  <div v-if="item.id == scope.row.bankerId"> {{ item.name }}</div>
                </template>
              </template>
            </el-table-column>
            <el-table-column
              prop="type"
              label="类型"
              width="180"
              align="center"
            >
              <template slot-scope="scope">
                <dict-tag :options="dict.type.play_type" :value="scope.row.type"/>
              </template>
            </el-table-column>
            <el-table-column
              prop="codes"
              label="码"
              align="center"
            >
              <template slot-scope="scope">
                <div class="codeClass" v-for="item in scope.row.codes">{{ item }}</div>
              </template>
            </el-table-column>
            <el-table-column
              prop="buyAmount"
              label="买入金额"
              align="center"
            >
              <template slot-scope="scope">
                <el-input-number v-model="scope.row.buyAmount" :min="1" :max="10000" label="金额"
                                 size="small"
                ></el-input-number>
              </template>
            </el-table-column>
            <el-table-column
              prop="custName"
              label="下家"
              align="center"
            >
              <template slot-scope="scope">
                <el-select v-model="scope.row.custId" placeholder="请选择下家" clearable>
                  <el-option :label="item.name" :value="item.id" v-for="item in customerList"></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column
              prop="bossName"
              label="上家"
              align="center"
            >
              <template slot-scope="scope">
                <el-select v-model="scope.row.bossId" placeholder="请选择上家" clearable>
                  <el-option :label="item.name" :value="item.id" v-for="item in bossList"></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column
              prop="sellAmount"
              label="卖出金额"
              align="center"
            >
              <template slot-scope="scope">
                <el-input-number v-model="scope.row.sellAmount" :min="0" :max="scope.row.buyAmount" label="金额"
                                 size="small"
                ></el-input-number>
              </template>
            </el-table-column>
            <el-table-column label="" align="center"
                             width="100"
            >
              <template slot-scope="scope">
                <el-button type="text" @click="sellOrder(scope)">卖出</el-button>
                <el-button type="text" @click="delOrder(scope)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
<!--      </el-collapse-item>-->
<!--    </el-collapse>-->
    <el-dialog
      title="出单"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="网站">
          <el-input v-model="form.bankerName" disabled></el-input>
        </el-form-item>
        <el-form-item label="类型">
          <el-select v-model="form.type" placeholder="请选择类型" disabled>
            <el-option :label="item.label" :value="item.value" v-for="item in dict.type.play_type"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="买入金额">
          <el-input-number v-model="form.buyAmount" :min="1" :max="10000000" label="买入金额" controls-position="right"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="下家">
          <el-select v-model="form.custId" placeholder="请选择下家" @change="changeCustHandler" clearable>
            <el-option :label="item.name" :value="item.id" v-for="item in customerList"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="上家">
          <el-select v-model="form.bossId" placeholder="请选择上家" @change="changeBossHandler" clearable>
            <el-option :label="item.name" :value="item.id" v-for="item in bossList"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="卖出金额">
          <el-input-number v-model="form.sellAmount" :min="0" :max="form.buyAmount" label="卖出金额"
                           controls-position="right"
          ></el-input-number>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="批量设置上下家"
      :visible.sync="batchEditDialogVisible"
      width="60%"
    >
      <el-table
        ref="orderTable"
        :data="orderSelection" stripe highlight-current-row
        style="width: 100%"
      >
        <el-table-column
          prop="bankerName"
          label="网站"
          width="180"
          align="center"
        >
          <template slot-scope="scope">
            <template v-for="item in bankers">
              <div v-if="item.id == scope.row.bankerId"> {{ item.name }}</div>
            </template>
          </template>
        </el-table-column>
        <el-table-column
          prop="type"
          label="类型"
          width="180"
          align="center"
        >
          <template slot-scope="scope">
            <dict-tag :options="dict.type.play_type" :value="scope.row.type"/>
          </template>
        </el-table-column>
        <el-table-column
          prop="codes"
          label="码"
          align="center"
        >
          <template slot-scope="scope">
            <div class="codeClass" v-for="item in scope.row.codes">{{ item }}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="buyAmount"
          label="买入金额"
          align="center"
        >
        </el-table-column>
      </el-table>
      <el-form ref="editForm" :model="editForm" label-width="80px">
        <el-form-item label="下家">
          <el-select v-model="editForm.custId" placeholder="请选择下家" @change="batchChangeCustHandler" clearable>
            <el-option :label="item.name" :value="item.id" v-for="item in customerList"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="上家">
          <el-select v-model="editForm.bossId" placeholder="请选择上家" @change="batchChangeBossHandler" clearable>
            <el-option :label="item.name" :value="item.id" v-for="item in bossList"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="batchEditDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmBatchEdit()">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="下单确认"
      :visible.sync="batchOrderDialogVisible"
      width="60%"
    >
      <el-table
        ref="orderTable"
        :data="orderSelection" stripe highlight-current-row
        style="width: 100%"
      >
        <el-table-column
          prop="bankerName"
          label="网站"
          width="180"
          align="center"
        >
          <template slot-scope="scope">
            <template v-for="item in bankers">
              <div v-if="item.id == scope.row.bankerId"> {{ item.name }}</div>
            </template>
          </template>
        </el-table-column>
        <el-table-column
          prop="type"
          label="类型"
          width="180"
          align="center"
        >
          <template slot-scope="scope">
            <dict-tag :options="dict.type.play_type" :value="scope.row.type"/>
          </template>
        </el-table-column>
        <el-table-column
          prop="codes"
          label="码"
          align="center"
        >
          <template slot-scope="scope">
            <div class="codeClass" v-for="item in scope.row.codes">{{ item }}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="buyAmount"
          label="买入金额"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="custName"
          label="下家"
          align="center"
        >
          <template slot-scope="scope">
            <template v-for="item in customerList">
               <div v-if="item.id === scope.row.custId"> {{item.name}} </div>
            </template>
          </template>
        </el-table-column>
        <el-table-column
          prop="bossName"
          label="上家"
          align="center"
        >
          <template slot-scope="scope">
            <template v-for="item in bossList">
              <div v-if="item.id === scope.row.bossId"> {{item.name}} </div>
            </template>
          </template>
        </el-table-column>
        <el-table-column
          prop="sellAmount"
          label="卖出金额"
          align="center"
        >
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="batchOrderDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitOrder()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import PlayOrderPanel from './PlayOrderPanel'
import { listCustomer } from '@/api/financial/customer'
import banker from '@/views/financial/banker/index.vue'
import { generateCombinations } from '@/utils/algorithm'

export default {
  name: 'OrderPanel',
  computed: {
    banker() {
      return banker
    }
  },
  dicts: ['play_type'],
  components: { PlayOrderPanel },
  data() {
    return {
      bankerTab: null,
      playTab: null,
      form: {},
      customerList: [
        {
          id: 4,
          name: '员工1'
        }, {
          id: 5,
          name: '员工2'
        }, {
          id: 6,
          name: '员工3'
        }
      ],
      bossList: [
        {
          id: 1,
          name: '上家1'
        }, {
          id: 2,
          name: '上家2'
        }, {
          id: 3,
          name: '上家3'
        }
      ],
      dialogVisible: false,
      batchEditDialogVisible: false,
      batchOrderDialogVisible: false,
      bankers: [
        { id: 1, name: '新澳' },
        { id: 2, name: '老澳' },
        { id: 3, name: '香港' }
      ],
      orderList: [],
      editOrderList: [],
      orderSelection: [],
      currentRow: null,
      batchType: 'view',
      editForm: {},
      storageKey: 'orderList'
    }
  },
  watch: {
    orderList: function(val) {
      this.setStorage(this.storageKey, val)
    }
  },
  created() {
    if (this.getStorage(this.storageKey)) {
      this.orderList = this.getStorage(this.storageKey)
    }
  },
  methods: {
    addOrder(item) {
      item.id = Date.now()
      this.orderList.push(item)
    },
    selectable(row) {
      if (this.batchType === 'order') {
        return row.custId !== undefined && row.custId !== ''
      } else if (this.batchType === 'view') {
        return false
      } else {
        return true
      }
    },
    handleCurrentChange(val) {
      this.currentRow = val
    },
    handleSelectionChange(val) {
      this.orderSelection = val
    },
    changeCustHandler(value) {
      this.form.custName = this.customerList.filter(item => item.id === value).map(item => item.name)[0]
    },
    changeBossHandler(value) {
      this.form.bossName = this.bossList.filter(item => item.id === value).map(item => item.name)[0]
    },
    sellOrder(item) {
      this.dialogVisible = true
      this.form = item.row
    },
    delOrder(item) {
      this.orderList.splice(item.$index, 1)
      this.setStorage(this.storageKey, this.orderList)
    },
    setStorage(key, value) {
      localStorage.setItem(key, JSON.stringify(value))
    },
    getStorage(key) {
      return JSON.parse(localStorage.getItem(key))
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {
        })
    },
    batchEditHandler() {
      if (this.batchType === 'edit') {
        if(this.orderSelection.length>0){
          this.batchType = 'view'
          this.batchEditDialogVisible = true
        }else{
          this.$message('请选择订单设置');
        }
      } else {
        this.batchType = 'edit'
      }
    },
    batchOrderHandler() {
      if (this.batchType === 'order') {
        if(this.orderSelection.length>0){
          this.batchType = 'view'
          this.batchOrderDialogVisible = true
        }else{
          this.$message('请选择订单设置');
        }
      } else {
        this.batchType = 'order'
      }
    },
    batchDeleteHandle() {
      if (this.batchType === 'del') {
        if(this.orderSelection.length>0){
          let bIds = this.orderSelection.map(bItem => bItem.id);
          this.orderList = this.orderList.filter(aItem => !bIds.includes(aItem.id));
          this.batchType = 'view'
        }else{
          this.$message('请选择订单删除');
        }
      } else {
        this.batchType = 'del'
      }
    },
    batchChangeCustHandler(val) {
      var orderList = this.orderList
      var orderSelection = this.orderSelection
      orderSelection.forEach((item) => {
        item.custId = val
      })
      this.editOrderList = orderList.reduce((result, oItem) => {
        let selectItem = orderSelection.find(item => item.id === oItem.id)
        result.push(selectItem || oItem)
        return result
      }, [])
    },
    batchChangeBossHandler(val) {
      var orderList = this.orderList
      var orderSelection = this.orderSelection
      orderSelection.forEach((item) => {
        item.bossId = val
      })
      this.editOrderList = orderList.reduce((result, oItem) => {
        let selectItem = orderSelection.find(item => item.id === oItem.id)
        result.push(selectItem || oItem)
        return result
      }, [])

    },
    confirmBatchEdit() {
      this.editForm = {}
      this.batchEditDialogVisible = false
      this.orderSelection = []
      var list = this.editOrderList
      this.orderList = list
      console.log(this.orderList)
      this.editOrderList = []
      this.$refs.orderTable.clearSelection()
      this.batchType = 'view'
    },
    submitOrder() {
      let bIds = this.orderSelection.map(bItem => bItem.id);
      this.orderList = this.orderList.filter(aItem => !bIds.includes(aItem.id));
    }
  }
}
</script>
<style scoped>
.box-card {
  margin: 5px;
}

.codeClass {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #FF5722;
  text-align: center;
  line-height: 50px;
  font-size: 16px;
  font-weight: bold;
  color: white;
  margin-left: 5px;
  display: inline-block;
}
</style>
